<template>
    <div class="head" style="z-index: 99;">
        <van-nav-bar title="景点打卡" left-arrow @click-left="onClickLeft" />
    </div>
    <div style="width: 100%;height: 50px;"></div>
    <div class="science_introduce">
        <img :src="introduce.img" alt="">
        <div v-html="introduce.introduction"></div>
    </div>
    <div class="title">
        <div></div>
        <p>精彩评论</p>
    </div>

    <div class="introduction_box" v-for="(item, index) in comment">

        <div class="head_img">
            <van-image round width="70px" height="70px" fit="cover" :src="item.headimg" />
        </div>
        <div class="right">
            <div class="top">
                <div class="comment">
                    <h3>{{ item.nickname }}</h3>
                    <p class="message">
                        {{ item.content }}
                    </p>
                    <div class="img">
                        <img v-for="(itemImg, index) in item.image" :src="itemImg" alt="">
                    </div>
                </div>
                <div class="button">
                    <van-button type="primary" size="small" @click="status = item.id,showPopup()">回复</van-button>
                </div>
            </div>
            <div class="reply">
                <p v-for="(itemword, index) in item.item"><span style="font-weight: bold;color: rgb(1, 157, 233);">{{
                    itemword.nickname }}：</span>{{ itemword.content }}</p>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="zan" @click="like()" v-if="likeStatus == false">
            <img src="../assets/zan.png" alt="">
            <p>点赞</p>
        </div>
        <div class="zan" v-else>
            <img src="../assets/zan_red.png" alt="">
            <p>已点赞</p>
        </div>
        <div class="clic">
            <van-button type="primary" size="large" round @click="showPopup(), status = ''">我也要晒照</van-button>
        </div>
    </div>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '40%', padding: '0px 20px 50px', }">
        <p style="width: 100%;text-align: end;font-weight: bold;line-height: 2;font-size: 20px;color: rgb(242, 145, 0);"
            @click="show = false">关闭</p>
        <div class="com">
            <van-cell-group inset>
                <van-field v-model="message" rows="1" autosize type="textarea" placeholder="说点什么吧" v-if="status == ''" />
                <van-field v-model="message" rows="1" autosize type="textarea" placeholder="说点什么吧" v-else />
            </van-cell-group>
            <van-uploader v-model="fileList" multiple :after-read="afterRead" v-if="status == ''" />
        </div>
        <div class="but">
            <van-button type="primary" size="large" round @click="publish()" v-if="status == ''">发表</van-button>
            <van-button type="primary" size="large" round @click="reply()" v-else>回复</van-button>
        </div>
    </van-popup>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { showToast } from 'vant';
const router = useRoute()
console.log(router.query.id);
const onClickLeft = () => history.back();
const introduce = ref({})
const comment = ref([])
const show = ref(false);
const status = ref()
const likeStatus = ref(false)
const fileList = ref([
    // Uploader 根据文件后缀来判断是否为图片文件
    // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
]);
let imgs
let userId = sessionStorage.getItem("userId")
let userData
const message = ref()
const afterRead = (file) => {
    console.log(file.file);
    // 此时可以自行将文件上传至服务器
    let param = new FormData(); //创建form对象
    param.append('file', file.file, file.file.name); //通过append向form对象添加数据
    axios({ //请求图片上传
        method: 'post',
        url: "/api/science/upload", // url
        data: param,
    })
        .then(function (res) {
            console.log(res); // 成功回调
            if (imgs != '') {
                imgs += ","
            }
            imgs += res.data.front_file
        })
        .catch(function (err) {
            console.log(err); // 失败回调
        });
    console.log(param);
};

const showPopup = () => {
    show.value = true;
    fileList.value = []
    imgs = ''
    message.value = ''
};
axios({ //请求用户信息
    url: "/api/user/userinfo", // url
    params: {
        // 参数
        id: userId
    },
})
    .then(function (res) {
        console.log(res); // 成功回调
        userData = res.data.user
    })
    .catch(function (err) {
        console.log(err); // 失败回调
    });

function request() {
    axios({ //请求评论列表
        url: "/api/science/clockdetail", // url
        params: {
            // 参数
            scienceid: router.query.id
        },
    })
        .then(function (res) {
            console.log(res); // 成功回调
            introduce.value = res.data.info
            comment.value = res.data.coment
        })
        .catch(function (err) {
            console.log(err); // 失败回调
        });
}
request()

function publish() {
    console.log(imgs);
    if (message.value == undefined) {
        showToast('文字不能为空');
        return
    }
    if (fileList.value.length <= 0) {
        showToast('图片不能为空');
        return
    }
    if (imgs == '') {
        return
    }
    axios({ //请求评论接口
        url: "/api/science/report", // url
        params: {
            // 参数
            userid: userId,
            nickname: userData.nickname,
            headimg: userData.img,
            scienceid: router.query.id,
            content: message.value,
            img: imgs
        },
    })
        .then(function (res) {
            console.log(res); // 成功回调
            show.value = false
            request()

        })
        .catch(function (err) {
            console.log(err); // 失败回调
        });

}

function reply() {
    axios({ //请求评论回复
        url: "/api/science/reply", // url
        params: {
            // 参数
            id: status.value,
            userid: userId,
            scienceid: router.query.id,
            content: message.value,
        },
    })
        .then(function (res) {
            console.log(res); // 成功回调
            show.value = false
            request()

        })
        .catch(function (err) {
            console.log(err); // 失败回调
        });
}
function like(){
    axios({ //请求点赞
        url: "/api/science/good", // url
        params: {
            // 参数
            id: status.value,
            userid: userId,
            scienceid: router.query.id,
            content: message.value,
        },
    })
        .then(function (res) {
            console.log(res); // 成功回调
            showToast('点赞成功！');
            likeStatus.value = true
        })
        .catch(function (err) {
            console.log(err); // 失败回调
        });
}
</script>

<style scoped>
.head {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
}

.science_introduce img {
    width: 100%;
    height: auto;
    padding: 20px;

}

.science_introduce {
    border-bottom: 5px solid #eeeeee;
    padding-bottom: 20px;
}

.introduction_box {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    padding: 10px;
    border-bottom: 5px solid #eeeeee;
}

.comment {
    width: 80%;
    height: auto;
}

.img {

    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
}

.img img {
    width: 30%;
    margin: 3.3%;
    aspect-ratio: 1;
}

.button {
    align-self: flex-end;
}

.title {
    width: 100%;
    height: auto;
    display: flex;
    border-bottom: 5px solid #eeeeee;
}

.title div {
    width: 10px;
    background-color: rgb(1, 157, 233);

}

.title p {
    line-height: 2;
    margin-left: 10px;
}

.reply {
    width: 100%;
    height: auto;
    background-color: #eeeeee;
    margin-top: 10px;
    padding-left: 10px;
}

.top {
    display: flex;
}

.right {
    width: 78%;
}

.footer {
    width: 100%;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    background-color: white;
}

.zan {
    width: 20%;
    height: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.zan img {
    width: 35px;
    height: 35px;
}

.zan p {
    width: 100%;
    height: auto;
    line-height: 2;
}

.clic {
    width: 70%;
}

.but {
    width: 90%;
    position: absolute;
    bottom: 0;
}
.com{
    height: 70%;
    overflow-y: scroll;
}
</style>